$(function () {
    // 查询的参数对象
    var query = {
        pagenum: 1, //第几页
        pagesize: 2, //每一页显示多少条
        cate_id: '', //分类ID
        state: '' //文章发布状态
    }
    // 导入layui相关
    const form = layui.form
    const layer = layui.layer
    var laypage = layui.laypage //分页

    // 发起请求，获取数据
    getArtList()
    // 获取数据
    function getArtList () {
        $.ajax({
            method: 'get',
            url: '/my/article/list',
            data: query,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取文章列表失败！')
                }
                console.log(res);
                // 使用模板引擎渲染数据
                let htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
                // 渲染分页 
                renderPage(res.total)
            }
        })
    }

    // 定义渲染分页的方法
    function renderPage (total) {
        // total 总数 
        //执行一个laypage实例，渲染分页结构
        console.log(total);
        laypage.render({
            elem: 'pageBox' //注意，这里的 pageBox 是 ID，不用加 # 号
            , count: total //数据总数，从服务端得到
            , limit: query.pagesize //每一页显示多少条数据
            , curr: query.pagenum //显示第几页
            
            , jump: function (obj, first) {
                // 触发jump回调的方式： 
                // 1 点击页码会触发
                // 2 只要调用了laypage.render方法就会触发
                query.pagenum = obj.curr
                query.limit = obj.limit
                // 第1种方式触发first值为false 
                // 第2种方式触发first值为true
                // console.log(first);
                if(!first){
                    // 只有第1中
                    getArtList()
                }
            }
        });
    }

})